<!--
 * @Description: 服务跟进
 * 
 * @Author: XiongYaoYuan<xiongyaoyuan>
 * @Date: 2023-08-02 17:02:54
 * @FilePath: /yuxiuproweb/src/views/mes/pro/workorder/mods/room/serve/index.vue
-->
<template>
  <el-collapse-item title="定制窗帘" name="0" disabled>
    <template slot="title">
      <i
        class="el-icon-circle-plus-outline mr10 expand"
        @click="handleExpand"
      ></i>
      服务跟进
    </template>
    <template v-if="list1.length">
      <el-alert title="变更单（待落实）" type="warning" show-icon> </el-alert>
      <el-table :data="list1" :max-height="500" size="mini" class="mb10" border>
        <el-table-column
          label="号"
          type="index"
          align="center"
          width="40"
        ></el-table-column>
        <el-table-column
          label="提交人"
          align="center"
          prop="createBy"
        ></el-table-column>
        <el-table-column
          label="提交时间"
          align="center"
          prop="createTime"
        ></el-table-column>
        <el-table-column
          label="内容"
          align="center"
          prop="content"
        ></el-table-column>
        <el-table-column
          label="金额"
          align="center"
          prop="remark"
        ></el-table-column>
      </el-table>
    </template>

    <template v-if="list2.length">
      <el-alert title="变更单（已落实）" type="success" show-icon> </el-alert>
      <el-table :data="list2" :max-height="500" size="mini" border>
        <el-table-column
          label="号"
          type="index"
          align="center"
          width="40"
        ></el-table-column>
        <el-table-column
          label="提交人"
          align="center"
          prop="createBy"
        ></el-table-column>
        <el-table-column
          label="提交时间"
          align="center"
          prop="createTime"
        ></el-table-column>
        <el-table-column
          label="内容"
          align="center"
          prop="content"
        ></el-table-column>
        <el-table-column
          label="金额"
          align="center"
          prop="remark"
        ></el-table-column>
      </el-table>
    </template>
  </el-collapse-item>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      list1: [],
      list2: [],
    };
  },

  watch: {
    list: {
      handler(list) {
        this.list1 = list.filter((e) => e.state === "0");
        this.list2 = list.filter((e) => e.state === "1");
      },
      immediate: true,
    },
  },

  created() {},
  methods: {
    handleExpand() {
      this.$emit("active", "0", "1");
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .cell {
    padding-left: 4px;
    padding-right: 4px;
  }
}
.expand {
  cursor: pointer;
}

::v-deep {
  .el-table--border,
  .el-table--group {
    border: 1px solid rgb(150, 150, 150) !important;
  }
  /**
  改变表格内竖线颜色
   */
  .el-table--border td,
  .el-table--border th,
  .el-table__body-wrapper
    .el-table--border.is-scrolling-left
    ~ .el-table__fixed {
    border-right: 1px solid rgb(150, 150, 150) !important;
  }
  /**
  改变表格内行线颜色
   */
  .el-table td,
  .el-table th.is-leaf,
  .el-table__cell {
    border-bottom: 1px solid rgb(150, 150, 150) !important;
  }
}
</style>
